<template>
    <div class="common-layout" >
        <div class="login parent  " style="background-color:rgb(239.8, 248.9, 235.3,0.6);box-shadow: var(--el-box-shadow-dark);" >
          

          <el-form
              ref="ruleFormRef"
              style="max-width: 600px"
              :model="ruleForm"
              :rules="rules"
              label-width="auto"
              class="demo-ruleForm"
              :size="formSize"
              status-icon
          >
          <h1 class="p">贽&nbsp;殿&nbsp;遮&nbsp;那</h1>
          <div class="child" >
            
              <el-form-item label="用户名" prop="name" class="">
                  <el-input v-model="ruleForm.name" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                  <el-input v-model="ruleForm.password" type="password"/>
              </el-form-item>
              <el-form-item style="margin-left: 125px;">
                  <el-button color="#f99" plain @click="submitForm(ruleFormRef)">
                      登录
                  </el-button>
                  <el-button @click="toRegister">注册</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
    </div>
</template>

rgb(250, 181.5, 181.5)

<script>
import { reactive } from 'vue';
import { ElForm } from 'element-plus';
import router from '@/router';
import axios from 'axios';

 
export default {
  components: {
    ElForm,
    // 其他需要的 Element Plus 组件
  },
  data() {
    return {
      formSize: 'default',
      ruleForm: reactive({
        name: '',
        password:''
      }),

      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 0, max: 10, message: '长度要在3-10', trigger: 'blur' },
        ],   
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度要在6-18', trigger: 'blur' },
        ],      
      },
      ruleFormRef: null,
      userList:[],
      registeredUsers:[]
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.ruleFormRef = this.$refs.ruleFormRef;
    });
    axios.get('users.json').then(res=>{
      this.userList=res.data.usersList;
    })
    this.registeredUsers.push(...JSON.parse(sessionStorage.getItem('registeredUsers')) || [])
    console.log(this.registeredUsers);

  },
  methods: {
    async submitForm() {
      if (!this.ruleFormRef) return;
      await this.ruleFormRef.validate((valid, fields) => {
        if (valid) {
          // 此处完成用户名和密码的匹配，如果匹配，则跳转首页
          // 使用some函数来对数组进行遍历，查找符合条件的用户名和密码
          this.userList.push(...this.registeredUsers)
          console.log(this.userList);
  
          let  flag = this.userList.some(v => v.name == this.ruleForm.name&& v.password==this.ruleForm.password)
          //对flag进行判断
          if(!flag){
            alert('请输入正确的用户名和密码')
            console.log('submit!');
          }
          else{
            sessionStorage.setItem('username',this.ruleForm.name)
            router.push('./')
          }
        } else {
          console.log('这里是哪，有BUG！！！！', fields);
        }
      });
    },
    toRegister() {
      router.push('./register')
    },
  },

};
</script>

<style scoped>
.login{
    width: 400px;
    height: 200px;
    margin: auto;
    text-align: center;
 
    
}
.common-layout{
    background:url(../../assets/img/login.jpg)
    no-repeat center;
    height: 100%;
    width: 100%;
    background-size: cover;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    /* opacity: 0.8; 设置图片透明度为 50% */
}
.parent{
  width: 420px;
  height: 300px;
  position: relative;
  margin-left: 49%;
  margin-top: 18%;
  /* background: red; */
}
.child{
  width: 350px;
  height: 100px;
  /* background-color: green; */
  position: absolute;
  top: 25%;
  bottom: 25%;
  margin-left: 18px;
  margin-top: 40px;
  /* margin: auto; */ 
  text-align: center;
  /* font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 100; */

}
.p{
color:rgba(255, 0, 0, 0.7);
font-family:华文行楷;
font-size: 50px;
}


</style>